<ul ngbNav
    #nav="ngbNav"
    class="nav-tabs"
    cdStatefulTab="image-list">
  <li ngbNavItem="issues">
    <a ngbNavLink
       i18n>Issues</a>
    <ng-template ngbNavContent>
      <cd-table [data]="image_error.data"
                columnMode="flex"
                [columns]="image_error.columns"
                [autoReload]="-1"
                (fetchData)="refresh()">
      </cd-table>
    </ng-template>
  </li>
  <li ngbNavItem="syncing">
    <a ngbNavLink
       i18n>Syncing</a>
    <ng-template ngbNavContent>
      <cd-table [data]="image_syncing.data"
                columnMode="flex"
                [columns]="image_syncing.columns"
                [autoReload]="-1"
                (fetchData)="refresh()">
      </cd-table>
    </ng-template>
  </li>
  <li ngbNavItem="ready">
    <a ngbNavLink
       i18n>Ready</a>
    <ng-template ngbNavContent>
      <cd-table [data]="image_ready.data"
                columnMode="flex"
                [columns]="image_ready.columns"
                [autoReload]="-1"
                (fetchData)="refresh()">
      </cd-table>
    </ng-template>
  </li>
</ul>

<div [ngbNavOutlet]="nav"></div>

<ng-template #stateTmpl
             let-row="row"
             let-value="value">
  <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
</ng-template>

<ng-template #syncTmpl>
  <span class="badge badge-info"
        i18n>Syncing</span>
</ng-template>

<ng-template #progressTmpl
             let-value="value">
  <ngb-progressbar type="info"
                   [value]="value"
                   [showValue]="true"></ngb-progressbar>
</ng-template>
